<script setup lang='ts'>
import { ref } from 'vue'

const templateListInfo = ref({
    "count": 12,
    "list": [
        {
            "_id": "61a739f38d5263ce811e7064",
            "id": 18,
            "title": "前端架构师直播海报",
            "desc": "未命名作品",
            "author": "136****5632",
            "coverImg": "https://static.imooc-lego.com/upload-files/screenshot-889755.png",
            "copiedCount": 1928,
            "isHot": true,
            "createdAt": "2020-11-18T05:47:04.000Z",
            "user": {
                "_id": "617d33bed38dbc5025755a8b",
                "username": "13611915632",
                "nickName": "乐高5632"
            }
        },
        {
            "_id": "61a739f38d5263ce811e7065",
            "id": 19,
            "title": "1024 程序员日",
            "desc": "1024 程序员日",
            "author": "185****2625",
            "coverImg": "http://static-dev.imooc-lego.com/imooc-test/sZHlgv.png",
            "copiedCount": 1397,
            "isHot": true,
            "createdAt": "2020-11-26T09:27:19.000Z",
            "user": {
                "_id": "617d33bed38dbc5025755a8b",
                "username": "13611915632",
                "nickName": "乐高5632"
            }
        },
        {
            "_id": "61a739f48d5263ce811e7066",
            "id": 20,
            "title": "招聘-慕课乐高",
            "desc": "招聘广告页",
            "author": "185****2625",
            "coverImg": "https://static.imooc-lego.com/upload-files/screenshot-323204.png",
            "copiedCount": 674,
            "isHot": false,
            "createdAt": "2020-11-25T07:37:23.000Z",
            "user": {
                "_id": "617d33bed38dbc5025755a8b",
                "username": "13611915632",
                "nickName": "乐高5632"
            }
        },
        {
            "_id": "61a739f48d5263ce811e7067",
            "id": 21,
            "title": "未命名作品",
            "desc": "未命名作品",
            "author": "136****5632",
            "coverImg": "https://static.imooc-lego.com/upload-files/screenshot-677311.png",
            "copiedCount": 368,
            "isHot": false,
            "createdAt": "2020-11-23T06:24:17.000Z",
            "user": {
                "_id": "617d33bed38dbc5025755a8b",
                "username": "13611915632",
                "nickName": "乐高5632"
            }
        },
        {
            "_id": "61a739f48d5263ce811e7069",
            "id": 23,
            "title": "慕课资讯",
            "desc": "程序员的早读时间",
            "author": "136****5632",
            "coverImg": "https://static.imooc-lego.com/upload-files/screenshot-726751.png",
            "copiedCount": 289,
            "isHot": false,
            "createdAt": "2020-11-18T14:48:36.000Z",
            "user": {
                "_id": "617d33bed38dbc5025755a8b",
                "username": "13611915632",
                "nickName": "乐高5632"
            }
        },
        {
            "_id": "61a739f48d5263ce811e706a",
            "id": 24,
            "title": "每日分享",
            "desc": "每日分享卡片",
            "author": "136****5632",
            "coverImg": "https://static.imooc-lego.com/upload-files/screenshot-682056.png",
            "copiedCount": 234,
            "isHot": false,
            "createdAt": "2020-11-18T14:41:17.000Z",
            "user": {
                "_id": "617d33bed38dbc5025755a8b",
                "username": "13611915632",
                "nickName": "乐高5632"
            }
        },
        {
            "_id": "61a739f48d5263ce811e7068",
            "id": 22,
            "title": "慕课 Live Java 入门编程课",
            "desc": "慕课 Live 只需3天 每天1.5 小时 0 基础新人 Java 入门编程课",
            "author": "136****5632",
            "coverImg": "https://static.imooc-lego.com/upload-files/screenshot-133701.png",
            "copiedCount": 172,
            "isHot": false,
            "createdAt": "2020-11-21T09:28:24.000Z",
            "user": {
                "_id": "617d33bed38dbc5025755a8b",
                "username": "13611915632",
                "nickName": "乐高5632"
            }
        },
        {
            "_id": "61a739f48d5263ce811e706b",
            "id": 25,
            "title": "慕课 Live",
            "desc": "这是慕课 live 如何搭建一套混合移动应用架构的海报",
            "author": "136****5632",
            "coverImg": "https://static.imooc-lego.com/upload-files/screenshot-649919.png",
            "copiedCount": 106,
            "isHot": false,
            "createdAt": "2020-11-18T12:36:49.000Z",
            "user": {
                "_id": "617d33bed38dbc5025755a8b",
                "username": "13611915632",
                "nickName": "乐高5632"
            }
        }
    ],
    "pageSize": 8,
    "pageIndex": 0
})
const getMoreTemplateBtnLoading = ref(false)
const getMoreTemplate = () => { }
</script>

<template>
    <div class="wrapper">
        <div class="list-wrapper">
            <a-row :gutter="[16, 16]">
                <a-col :span="6" v-for="item in templateListInfo.list">
                    <a class="list-item" :href="'/template/' + item.id">
                        <a-card hoverable>
                            <template #cover>
                                <div class="mask">
                                    <a-button type="primary" shape="round">使用该模板创建</a-button>
                                </div>
                                <img :src="item.coverImg" />
                            </template>
                            <a-card-meta :title="item.title">
                                <template #description>
                                    <div class="left">作者：{{ item.user.nickName }}</div>
                                    <div class="right">
                                        <i class="iconfont icon-user"></i>
                                        {{ item.copiedCount }}
                                    </div>
                                </template>
                            </a-card-meta>
                        </a-card>
                        <a-tag color="red" v-if="item.isHot">Hot</a-tag>
                    </a>
                </a-col>
            </a-row>
        </div>
        <div class="get-more-btn-wrapper">
            <a-button type="primary" class="get-more-btn" :loading="getMoreTemplateBtnLoading" shape="round"
                @click="getMoreTemplate">加载更多</a-button>
        </div>
    </div>
</template>

<style scoped lang='scss'>
.wrapper {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 40px;

    .list-wrapper {
        margin-top: 60px;

        .list-item {
            display: block;
            position: relative;

            .ant-card {
                overflow: hidden;

                :deep(.ant-card-cover) {
                    overflow: hidden;
                    position: relative;

                    &:hover {
                        .mask {
                            display: flex;
                        }

                        img {
                            transform: scale(1.2);
                        }
                    }


                    .mask {
                        background: rgba($color: #000000, $alpha: 0.5);
                        position: absolute;
                        z-index: 1;
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        display: none;
                        justify-content: center;
                        align-items: center;
                    }

                    img {
                        transition: 500ms;
                        transform: scale(1.0);
                        height: 390px;
                        object-fit: cover;
                        object-position: top;

                    }
                }

                :deep(.ant-card-body) {
                    padding: 10px;
                }

                :deep(.ant-card-meta-description) {
                    display: flex;
                    justify-content: space-between;
                }
            }

            .ant-tag {
                position: absolute;
                top: -3px;
                left: -3px;
                border-radius: 20px;
                z-index: 2;
            }
        }
    }

    .get-more-btn-wrapper {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }
}
</style>